
<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <van-button size="mini" type="info" @click="edit">{{isEdit?'取消':'编辑'}}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item v-for="(item,index) in myChannelList" :key="item.id">
          <span @click="chanelClick(index)">{{ item.name }}</span>
          <van-icon name="cross" class="btn"  @click.stop="delMyChannel(index)" v-show="isEdit===true && item.id!==0"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item v-for="item in recommendChannels" :key="item.id"
        @click="addChannel(item)">
          <span >{{ item.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, updateChannelList } from '@/api/channel.js'
export default {
  name: 'ChannelEdit',
  props: {
    myChannelList: {
      type: Array
    }
  },
  data () {
    return {
      allMyChannels: [],
      isEdit: false
    }
  },
  methods: {
    addChannel (channel) {
      this.myChannelList.push(channel)
      //   通知数据库
      const channels = this.myChannelList.map((item, index) => {
        return {
          id: item.id,
          seq: index + 1
        }
      }).filter(i => {
        return i.id !== 0
      })
      updateChannelList({ channels }).then(res => {
        console.log(res)
        this.$toast.success('添加成功')
      })
    },
    delMyChannel (index) {
      this.myChannelList.splice(index, 1)
      //   通知数据库
      const channels = this.myChannelList.map((item, index) => {
        return {
          id: item.id,
          seq: index + 1
        }
      }).filter(i => {
        return i.id !== 0
      })
      updateChannelList({ channels }).then(res => {
        console.log(res)
        this.$toast.success('删除成功')
      })
    },
    chanelClick (index) {
      this.$emit('my-chanel-click', index)
    },
    edit () {
      this.isEdit = !this.isEdit
    },
    hgetAllChannels () {
      getAllChannels().then((res) => {
        // console.log(res)
        this.allMyChannels = res.data.data.channels
      })
    }
  },
  created () {
    this.hgetAllChannels()
  },
  computed: {
    recommendChannels () {
      const newArr = this.allMyChannels.filter((item) => {
        const b = this.myChannelList.find((i) => {
          return i.id === item.id
        })
        // console.log(b)
        return b === undefined
        // const index = this.myChannelList.findIndex(channel => {
        //   return channel.id === item.id
        // })
        // return index === -1
      })
      return newArr
    }
  }
}
</script>

<style lang="less" scoped>
.channel {
  font-size: 13px;
}
.btn {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 14px;
  color: red;
}
</style>
